<!--
 * @Description: 订单tab
 * @Author: charles
 * @Date: 2021-12-14 20:42:55
 * @LastEditors: charles
 * @LastEditTime: 2021-12-14 21:22:20
-->
<template>
  <div class="order">
    <van-nav-bar title="我的工单" />
    <van-tabs @click="tabClickHandler" v-model="active" color="#1659a0">
      <van-tab title="进行中"></van-tab> 
      <van-tab title="已完成"></van-tab> 
    </van-tabs>
    <!-- 订单 -->
    <div class="order_list">
      <div class="order" 
      v-for="o in workOrderData.list" 
      :key="o.id"
       @click="toWorkerOrderDetails(o)">
        <van-row>
          <van-col 
          style="text-align:center;
          font-size: 22px">
            <div class="left">
         <img src="@/assets/work.png" 
         alt="图片丢失" width="50px" 
         height="50">
        </div>
          </van-col>
          <van-col span="18">
          <div>工单状态：{{ o.status }}</div>
          <div>工单类型：{{ o.type }}</div>
          <div>申请时间：{{ o.create_time |datefmt }}</div>
          </van-col>
        </van-row>
        <div class="btns">
          <van-button 
            v-if="o.status === '进行中'" 
            plain hairline size="mini" 
            type="primary" @click="toCompeleteOrderHandler(o)">完成</van-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import { get } from '@/http/axios';
import { Dialog } from 'vant';
import { Notify } from 'vant';
export default {
  data(){
    return {
      active:0,
      orders:[],
      status:null,
      params:{
        page:1,
        pageSize:100,
      },
      workOrderData:{list:[]}
    }
  },
  computed:{
    ...mapState("user",["info"])
  },
  mounted() {
    this.loadWorkOrder();
  },
  methods:{
    // 完成工单
    toCompeleteOrderHandler(row){
      this.$router.push({
        path:'/manager/complete',
        query:row
      })
    },
    // 点击tab的时候执行的回调函数
    tabClickHandler(name,title){
      // 修改当前data中status的值； 重新加载订单
      this.params.status = title === "全部" ? null : title;
      this.loadWorkOrder();
    },
    // 查询个人工单
    findPersonOrder() {
      get("/workorder/pageQuery", {
        page: 1,
        pageSize: 100,
        status: this.status,
        account_id: this.info.id,
      }).then((res) => {
        this.orders = res.data.list;
      });
    },
    // 加载当前用户的工单信息
    loadWorkOrder(){
      let url = "/workorder/pageQuery"
      // 绑定当前用户
      this.params.account_id = this.info.id;
      get(url,this.params).then(resp => {
        this.workOrderData = resp.data;
      })
    },
    
    toWorkerOrderDetails(workOrder){
       this.$router.push({
       path: '/orderDetail',
       query: workOrder,
       })
       
     },
     created() {
    // 调用查询个人工单方法
    this.findPersonOrder();
  },
  }
  
}
</script>
<style scoped>
.order {
  font-size: 14px;
  color: #000;
  padding-bottom: 30px;
  background-color: #f4f4f4;
  border: 1px solid #999;
  padding: 10dx;
  cursor: pointer;
}
.order .order_list{
  padding: .5em;
}
.order .order_list > .order {
  background-color: #fff;
  margin-bottom: .5em;
  border-radius: 5px;
  padding:.5em
}
.order .order_list > .order > .time {
  line-height: 2.4em;
  border-bottom: 1px solid #f4f4f4;
}
.order .order_list > .order > .btns {
  padding: .5em;
  text-align: right;
}
</style>